<template>
  <div>
    <h1>路由嵌套 nested router</h1>
    <router-link to="./fhy">范豪宇</router-link>
    <router-link to="./cdh">程大浩</router-link>
    <router-view/>
    <hr>
    <h1>使用axios进行前后端交互</h1>
    <button @click="getSong">发请求</button>
    <p>歌词翻译者：{{nickname}}</p>
  </div>
</template>

<script>
// 导入axios这个工具
import axios from 'axios'
// 导入接口
import {cloudmusic} from '../../sever'
export default {
  data () {
    return {
      nickname: ''
    }
  },
  methods: {
    getSong() {
      // 保留this指向
      let _this = this
      // axios.get('https://api.imjad.cn/cloudmusic/?type=lyric&id=28012031')
      axios.get(cloudmusic, {
        params: {
          type: 'lyric',
          id: '28012031'
        }
      })
        // then方法是正确的回调
        .then(function (response) {
          console.log(response);
          _this.nickname = response.data.transUser.nickname
        })
        // catch方法是错误的回调
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}
</script>

<style scoped>

</style>
